<template>
  <div class="solution-card" @click="$emit('click')">
    <div class="card-image">
      <img :src="solution.image" :alt="solution.title">
      <div class="image-overlay"></div>
    </div>
    <div class="card-content">
      <h3 class="title">{{ solution.title }}</h3>
      <p class="description">{{ solution.description }}</p>
      <div class="features" v-if="solution.features?.length">
        <div v-for="(feature, index) in solution.features" :key="index" class="feature-item">
          <el-icon><Check /></el-icon>
          <span>{{ feature }}</span>
        </div>
      </div>
      <div class="advantages" v-if="solution.advantages?.length">
        <h4>核心优势</h4>
        <div v-for="(advantage, index) in solution.advantages" 
             :key="index" 
             class="advantage-item">
          <el-icon><component :is="advantage.icon" /></el-icon>
          <span>{{ advantage.text }}</span>
        </div>
      </div>
      <div class="actions">
        <button class="learn-more">
          <span>了解更多</span>
          <el-icon><ArrowRight /></el-icon>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Check, ArrowRight } from '@element-plus/icons-vue'

defineProps({
  solution: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      title: '',
      description: '',
      image: '',
      features: [],
      advantages: [],
      route: ''
    })
  }
})
</script>

<style lang="scss" scoped>
.solution-card {
  height: 100%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.2);
    
    .card-image {
      img {
        transform: scale(1.1);
      }
      
      .image-overlay {
        opacity: 0.3;
      }
    }
    
    .learn-more {
      background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
      color: #fff;
      
      .el-icon {
        transform: translateX(5px);
      }
    }
  }

  .card-image {
    position: relative;
    height: 200px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }

  .card-content {
    padding: 25px;

    .title {
      font-size: 22px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 15px;
    }

    .description {
      font-size: 15px;
      color: #6c757d;
      line-height: 1.6;
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .features {
      margin-bottom: 20px;

      .feature-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 14px;
        color: #6c757d;

        .el-icon {
          color: #ff6b6b;
          margin-right: 8px;
          font-size: 16px;
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .advantages {
      margin-bottom: 25px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 12px;

      h4 {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 12px;
      }

      .advantage-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 14px;
        color: #6c757d;

        .el-icon {
          color: #ff6b6b;
          margin-right: 8px;
          font-size: 16px;
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .actions {
      text-align: center;
      
      .learn-more {
        display: inline-flex;
        align-items: center;
        padding: 12px 25px;
        background: #f8f9fa;
        color: #ff6b6b;
        border: none;
        border-radius: 25px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        
        span {
          margin-right: 8px;
        }
        
        .el-icon {
          transition: transform 0.3s ease;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .card-image {
      height: 180px;
    }
    
    .card-content {
      padding: 20px;
      
      .title {
        font-size: 20px;
      }
      
      .description {
        font-size: 14px;
        margin-bottom: 15px;
      }
      
      .features,
      .advantages {
        margin-bottom: 20px;
      }
      
      .actions {
        .learn-more {
          padding: 10px 20px;
          font-size: 14px;
        }
      }
    }
  }
}
</style> 